<template>
  <div>
    <a-form-model-item label="宽度">
        <a-input-number
          style="width:100%"
          v-model="width"
          placeholder=""
          size="default"
          :disabled="false"
          decimalSeparator="."
          :precision="0"
          step="1"
          :max="999999999"
          :min="0"
        >
        </a-input-number>
      </a-form-model-item>
    <div style="background-color: ghostwhite;padding: 10px 15px;">
      <draggable
        v-model="opers"
        v-bind="{
          group: 'operConfig',
          ghostClass: 'ghost',
          animation: 200,
        }"
        class="widget-form-list"
        handle=".config-move"
      >
        <div
          class="config-options margin-bottom-sm "
          v-for="(opt, o) in opers"
          :key="o"
        >
          <i
            class="designer-icon config-move"
            style="font-size: 18px;cursor:move;"
            >&#xe627;</i
          >
          <span class="margin-left-lg" style="font-size:18px;">{{
            opt.label
          }}</span>
          <i
            class="designer-icon margin-left-lg"
            @click="editOper(opt, o)"
            style="cursor:pointer;font-size: 18px;color: #f5222d"
            >&#xe60e;</i
          >
          <i
            class="designer-icon margin-left-lg"
            @click="delOper(opt, o)"
            style="cursor:pointer;font-size: 18px;color: #f5222d"
            >&#xe665;</i
          >
        </div>
      </draggable>

      <div class="margin-left-sm margin-tb-lg">
        <a @click="addOper()" class="designer-icon">&#xe655;添加操作</a>
      </div>
    </div>
    <oper-add ref="operAdd" @success="success" />
  </div>
</template>
<script>
import operAdd from './operAdd.vue'
export default {
  components: { operAdd },
  data() {
    return {
      width: 200,
      opers: []
    }
  },
  created() {},
  mounted() {},
  watch: {
    opers: {
      handler() {
        this.change()
      },
      deep: true
    }
  },
  methods: {
    init(data) {
      this.width = data.width || 200
      this.opers = data.items || []
    },
    addOper() {
      this.$refs.operAdd.showModal()
    },
    editOper(opt, o) {
      this.$refs.operAdd.showModal(opt, o)
    },
    delOper(opt, o) {
      this.opers.splice(o, 1)
      // this.change()
    },
    success(item, idx) {
      if (idx > -1) {
        this.opers[idx] = item
        this.opers = JSON.parse(JSON.stringify(this.opers))
      } else {
        this.opers.push(item)
      }
      // this.change()
    },
    change() {
      if (this.opers.length > 0) {
        this.$emit('change', {
          width: this.width,
          items: this.opers
        })
      } else {
        this.$emit('change', null)
      }
    }
  }
}
</script>
<style></style>
